<template>
	<div class="page-index">
		<!-- <div style="width: 100px; height: 100px; background-color: red;" @click="$router.push('/free')">付邮即送的入口</div> -->
		<div class="header">
			<img class="subsidy-bg" src="@/assets/2/images/subsidy-bg2.png" />

			<!-- 提示 -->
			<div class="top-tips">
				<img class="top-tips__cover" src="@/assets/2/images/top-tab.png" />

				<div class="top-tips__item">累计已发{{ bwbt_conf.total || 0 }}亿元</div>
				<div class="top-tips__item active">今日已发{{ bwbt_conf.today || 0 }}万元</div>
				<div class="top-tips__item">每日{{ bwbt_conf.startVieTime || 0 }}点开抢</div>
			</div>

			<!-- 补贴金 -->
			<div class="subsidy-price">
				<img mode="widthFix" class="subsidy-price-bg" src="@/assets/2/images/subsidy-price-bg.png" />

				<!-- 马上抢 -->
				<div class="use-btn" @click="toRedPackage">
					<img class="m" src="@/assets/2/images/use-btn.png" />
					<img class="g" src="@/assets/2/images/g.png" />
				</div>

				<div class="detail">
					<span class="value">{{ bwbt_userInfo.subsidiesAmount || 0 }}</span>

					<div class="countdown">
						<cl-countdown
							:splitor="[':', ':', ':']"
							:layout="['hour', 'minute', 'second']"
							:datetime="endTime"
							is-millisecond
							@done="onCountdownDone"
						></cl-countdown>
						<span>后失效</span>
					</div>
				</div>

				<!-- 滚动名单 -->
				<winners></winners>
			</div>
		</div>

		<!-- 轮播图 -->
		<banner @copy="bannerCopy"></banner>

		<div class="container">
			<!-- 选项卡 -->
			<div class="goods-list">
				<van-tabs v-model="current" @change="onChangeSwiper" animated swipeable sticky :offset-top="48">
					<van-tab :title="item.label" :name="index" v-for="(item, index) in list" :key="index">
						<van-pull-refresh class="scroller" v-model="loading" @refresh="onPullDownRefresh">
							<van-list v-model="item.loading" :finished="item.finish" finished-text="没有更多了" @load="onReachBottom">
								<div class="goods-items">
									<template v-if="limitList.length != 0 && index == 0">
										<div class="goods-limits">
											<div class="limit-box" :style="{ backgroundImage: 'url(' + marketBackgroundUrl + ')' }">
												<div class="limit-head">
													<div>{{ marketTitle }}</div>
													<div class="showMore" @click="seeMore">查看更多</div>
												</div>
												<div>
													<goods-item
														v-for="(item3, index3) in limitList"
														:key="index3"
														:item="item3"
														:index="index3"
														:tab-index="index"
														:showLimit="true"
														@grab="onItemGrab"
														@copy="onItemCopy"
														@change="onItemChange"
														@ins-balance="onInsBalance"
													></goods-item>
												</div>
											</div>
										</div>
									</template>
									<!-- 优选 -->
									<template v-if="item.value == 'shop'">
										<goods-item-shop
											v-for="(item2, index2) in item.children"
											:key="index2"
											:item="item2"
											:index="index2"
											:tab-index="index"
										></goods-item-shop>
									</template>

									<!-- 京东商品 -->
									<template v-else-if="item.value == 'jd'">
										<goods-item-jd
											v-for="(item2, index2) in item.children"
											:key="index2"
											:item="item2"
											:index="index2"
											:tab-index="index"
										></goods-item-jd>
									</template>

									<!-- 京东商品 -->
									<template v-else-if="item.value == 'wph'">
										<goods-item-wph
											v-for="(item2, index2) in item.children"
											:key="index2"
											:item="item2"
											:index="index2"
											:tab-index="index"
										></goods-item-wph>
									</template>

									<!-- 默认 -->
									<template v-else>
										<goods-item
											v-for="(item2, index2) in item.children"
											:key="index2"
											:item="item2"
											:index="index2"
											:tab-index="index"
											@grab="onItemGrab"
											@copy="onItemCopy"
											@change="onItemChange"
											@ins-balance="onInsBalance"
										></goods-item>
									</template>
								</div>
							</van-list>
						</van-pull-refresh>
					</van-tab>
				</van-tabs>
			</div>
		</div>

		<!-- 补贴金吸顶 -->
		<div class="subsidy-price-sticky" v-if="scrollTop > 250">
			<img mode="widthFix" src="@/assets/2/images/subsidy-price-bg-2.png" />
			<span class="price">￥{{ bwbt_userInfo.subsidiesAmount || 0 }}</span>
			<div class="countdown">
				<cl-countdown :splitor="[':', ':', ':']" :layout="['hour', 'minute', 'second']" :datetime="endTime" isMillisecond></cl-countdown>
				<span>后失效</span>
			</div>
		</div>

		<!-- 复制口令 -->
		<div class="pupop-copy-tkl">
			<cl-popup direction="center" :visible.sync="copyTkl.visible">
				<img src="@/assets/2/images/toast-success.png" />

				<p class="fa">{{ bwbt_conf.tklTemplate }}复制成功</p>
				<p class="fa">打开【{{ bwbt_conf.openTemplate }}】购买吧</p>
				<p class="fb">优惠券到期时间</p>

				<div class="countdown">
					<cl-countdown :splitor="['分', '秒']" :layout="['hour', 'minute', 'second']" :datetime="endTime"></cl-countdown>
				</div>

				<span class="cl-icon-close" @click="copyTkl.visible = false"></span>
			</cl-popup>
		</div>

		<!-- 抢到了 -->
		<div class="popup-snatched _copy-btn" :data-clipboard-span="snatched.tkl">
			<cl-popup direction="center" :visible.sync="snatched.visible">
				<img class="popup-snatched__cover" src="@/assets/2/images/grabbg.png" />

				<div class="popup-snatched__tips">
					<p>打开【{{ bwbt_conf.openTemplate }}】购买吧</p>
					<div class="countdown">
						<p>请在</p>
						<cl-countdown :splitor="['分', '秒']" :layout="['hour', 'minute', 'second']" :datetime="endTime"></cl-countdown>
						<p>前购买</p>
					</div>
				</div>

				<button class="popup-snatched__btn _copy-btn" :data-clipboard-text="snatched.tkl" @click="snatched.visible = false">
					我知道了
				</button>
			</cl-popup>
		</div>

		<!-- banner复制tkl -->
		<div class="popup-banner">
			<cl-popup direction="center" :visible.sync="snatchedBanner.visible">
				<img class="popup-banner__cover" src="@/assets/2/images/grabbg.png" />
				<div class="popup-banner__val">打开【{{ bwbt_conf.openTemplate }}】立即领取</div>
				<img class="icon-close" @click="snatchedBanner.visible = false" src="@/assets/2/images/icon-close.png" />
			</cl-popup>
		</div>

		<!-- 去淘宝马上抢 -->
		<div class="popup-totb">
			<cl-popup direction="center" :visible.sync="totb.visible">
				<img class="popup-totb__cover" src="@/assets/2/images/to-tb.png" />

				<div class="popup-totb__tips">
					<p>天天抢红包，最高618元</p>
					<p>打开【{{ bwbt_conf.openTemplate }}】马上抢！</p>
				</div>

				<button class="popup-totb__btn" @click="totb.visible = false">
					我知道了
				</button>

				<img class="popup-totb__close" src="@/assets/2/images/close.png" @click="totb.visible = false" />
			</cl-popup>
		</div>

		<!-- 分享 -->
		<share ref="share" show-button />

		<!-- 补贴规则 -->
		<rules ref="rules"></rules>

		<!-- 余额不足 -->
		<balance-popup ref="balance-popup" @share="onShare" />

		<!-- 优选 -->
		<shop-btn :current="list[current]"></shop-btn>

		<!-- 现金红包 -->
		<red-package-popup ref="red-package-popup"></red-package-popup>

		<!-- 任务倒计时 -->
		<task-popup :current="list[current]" ref="task-popup"></task-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import Clipboard from 'clipboard';
import moment from 'moment';
import VanTab from 'vant/lib/tab';
import VanTabs from 'vant/lib/tabs';
import VanSkeleton from 'vant/lib/skeleton';
import Toast from 'vant/lib/toast';

import GoodsItem from './components/goods-item';
import GoodsItemShop from './components/goods-item/shop';
import GoodsItemJd from './components/goods-item/jd';
import GoodsItemWph from './components/goods-item/wph';
import Rules from './components/rules';
import Share from './components/share';
import BalancePopup from './components/balance-popup';
import Winners from './components/winners';
import ShopBtn from './components/shop-btn';
import RedPackagePopup from './components/red-package';
import TaskPopup from './components/task/popup';
import Banner from './components/banner';
import ClCountdown from '@/components/countdown';
import ClPopup from '@/components/popup';

import $ from 'jquery';

import { getQueryString } from '@/utils';

export default {
	components: {
		GoodsItem,
		GoodsItemShop,
		GoodsItemJd,
		GoodsItemWph,
		Rules,
		Share,
		BalancePopup,
		Winners,
		ShopBtn,
		RedPackagePopup,
		Banner,
		ClCountdown,
		ClPopup,
		TaskPopup,
		VanTabs,
		VanTab,
		VanSkeleton
	},

	data() {
		return {
			current: 0,
			loading: false,
			skeletonLoading: false,
			list: [],
			scrollTop: 0,
			endTime: '',
			snatched: {
				visible: false,
				timer: null,
				tkl: ''
			},
			snatchedBanner: {
				visible: false
			},
			totb: {
				visible: false
			},
			copyTkl: {
				visible: false,
				timer: null
			},
			done: false,
			selects: {
				category: ''
			},
			categoryMenu: {
				visible: false
			},
			limitList: [],
			marketBackgroundUrl: '',
			marketTitle: ''
		};
	},

	computed: {
		...mapGetters(['bwbt_userInfo', 'token', 'bwbt_conf'])
	},

	watch: {
		token(val) {
			if (val) {
				this.getUserInfo();
			}
		}
	},

	activated() {
		// this.$service.bwbt.bwbtUser.shareBwbt();

		this.loading = true;

		const { category } = this.$route.query;

		// 获取类目
		this.selects.category = category || getQueryString('category') || '';

		if (this.token) {
			this.getUserInfo();
		}
	},

	beforeRouteLeave(to, from, next) {
		this.$refs['task-popup'].close();
		next();
	},

	mounted() {
		window.addEventListener('scroll', () => {
			this.scrollTop = $(document).scrollTop();
		});

		const mo = function(e) {
			e.preventDefault();
		};

		function stop() {
			document.querySelector('.header').addEventListener('touchmove', mo, { passive: false }); //禁止页面滑动
		}
	},
	created() {
		console.log('onload');
		console.log(this.$service);
		//获取限时限量商品
		this.$service.bwbt.bwbtGoods
			.marketGoods({
				page: '1',
				size: '3'
			})
			.then(res => {
				console.log(res.list);
				this.limitList = res.list;
			})
			.catch(err => {
				console.error(err);
			});
	},
	methods: {
		seeMore() {
			this.$router.push('/bwbt-limit');
		},
		getUserInfo() {
			Toast.loading({
				message: '加载中'
			});

			this.$store
				.dispatch('GET_BWBT_USERINFO')
				.then(res => {
					if (res.config.newPersonPageType == 1 && res.user.newPerson == 1 && res.user.numToday === 0) {
						this.$refs['red-package-popup'].open();
					}
					this.marketBackgroundUrl = res.config.marketBackgroundUrl;
					this.marketTitle = res.config.marketTitle;
					// 获取类目
					this.getClassify();
					// 开始倒计时
					this.startCountdown();

					// 是否注册复制
					if (res.config.orderConfig.includes('copy')) {
						new Clipboard(`._copy-btn`);
					}

					// banner复制
					new Clipboard(`.copy-btn`).on('success', e => {
						this.totb.visible = true;
						e.clearSelection();
					});

					Toast.clear();
				})
				.catch(err => {
					console.error(err);
					this.loading = false;
					Toast.clear();
				});
		},

		getClassify() {
			this.$service.bwbt.specialClassify
				.list({
					specialType: 100
				})
				.then(res => {
					res.splice(1, 0, {
						mainName: '优选',
						floorId: 'shop'
					});

					if (this.bwbt_userInfo) {
						// 白名单
						if (this.bwbt_userInfo.isWhite == 1 || this.bwbt_conf.jdFloorShow == 1) {
							res.splice(1, 0, {
								mainName: '京东商品',
								floorId: 'jd'
							});
						}

						if (this.bwbt_userInfo.isWhite == 1) {
							res.splice(2, 0, {
								mainName: '唯品会',
								floorId: 'wph'
							});
						}
					}

					this.list = res.map(e => {
						return {
							label: e.mainName,
							value: e.floorId,
							children: [],
							finish: false,
							loading: false,
							pagination: {
								page: 1,
								size: 20
							}
						};
					});

					// 加载类目更多菜单
					this.insertCategoryMenu();

					// 定位到指定类目
					this.current = this.list.findIndex(e => e.value == this.selects.category);

					if (this.current == -1) {
						this.current = 0;
					}

					this.loading = false;

					if (this.list.length > 0) {
						this.refresh({
							page: 1
						});
					}
				})
				.catch(err => {
					console.error(err);

					this.loading = false;
				});
		},

		bannerCopy() {
			this.snatchedBanner.visible = true;
		},

		onChangeSwiper(index) {
			this.current = index;

			this.$hmt.push('类目点击事件', `切换${this.list[index].label}`);

			// 切换判断当前tab是否有内容，没有加载，有不操作
			if (this.list[index].children.length == 0) {
				this.$refs['task-popup'].stop();

				this.refresh({
					page: 1
				});
			} else {
				this.$refs['task-popup'].open(this.list[index].value);
			}
		},

		changeCategoryMenu() {
			this.categoryMenu.visible = !this.categoryMenu.visible;
		},

		insertCategoryMenu() {
			let div = document.createElement('div');
			let ul = document.createElement('ul');
			let img = document.createElement('img');

			div.className = 'van-tabs__more';

			img.src = require('@/assets/icons/unfold.png');
			img.style.height = '20px';
			img.style.width = '20px';

			div.appendChild(img);

			div.onclick = () => {
				if (ul.style.display == 'none') {
					ul.style.display = 'flex';
					img.src = require('@/assets/icons/fold.png');
				} else {
					ul.style.display = 'none';
					img.src = require('@/assets/icons/unfold.png');
				}
			};

			document.querySelector('.van-tabs .van-sticky').appendChild(div);

			ul.className = 'van-tabs__menu';

			for (let i = 0; i < this.list.length; i++) {
				let li = document.createElement('li');
				li.innerText = this.list[i].label;
				li.onclick = () => {
					this.onChangeSwiper(i);
					ul.style.display = 'none';
				};
				ul.appendChild(li);
			}

			document.querySelector('.van-tabs .van-sticky').appendChild(ul);
		},

		onItemGrab(tkl) {
			this.snatched.visible = true;
			this.snatched.tkl = tkl;
			clearInterval(this.snatched.timer);

			if (this.bwbt_conf.orderConfig == 'copy-close') {
				this.snatched.timer = setTimeout(() => {
					this.snatched.visible = false;
				}, 3000);
			}
		},

		// 修改其他列表同个商品的信息
		onItemChange(item) {
			this.list.forEach(e => {
				if (e.children) {
					e.children.forEach(a => {
						if (a.gid == item.gid) {
							Object.assign(a, item);
						}
					});
				}
			});
		},

		onItemCopy() {
			this.copyTkl.visible = true;
			clearInterval(this.copyTkl.timer);

			this.copyTkl.timer = setTimeout(() => {
				this.copyTkl.visible = false;
			}, 3000);
		},

		onInsBalance() {
			this.$refs['balance-popup'].open();
		},

		onShare() {
			this.$refs['share'].open();
		},

		startCountdown() {
			let t = Number(this.bwbt_conf.countDownTime || '60') || '60';
			let now = null;

			if (t != localStorage.getItem('countdown_mode')) {
				localStorage.removeItem('countdown');
			}

			if (t < 0) {
				now = moment().format('YYYY-MM-DD 23:59:59');
			} else {
				if (isNaN(t)) {
					t = 60;
				}
				now = moment()
					.add(t, 'minute')
					.format('YYYY-MM-DD HH:mm:ss');
			}

			let endTime = localStorage.getItem('countdown');

			if (!endTime) {
				endTime = now;
			} else {
				if (moment(endTime).isBefore(moment())) {
					endTime = now;
				}
			}

			localStorage.setItem('countdown', endTime);
			localStorage.setItem('countdown_mode', t);

			this.endTime = endTime;
		},

		onCountdownDone() {
			localStorage.removeItem('countdown');
			localStorage.removeItem('countdown_mode');
			this.startCountdown();
		},

		toRedPackage() {
			this.$router.push('/h5-red-package');
		},

		refresh(params) {
			const item = this.list[this.current];

			item.loading = true;
			item.pagination.page = params.page || 1;
			this.skeletonLoading = true;

			return new Promise((resolve, reject) => {
				const { page, size } = item.pagination;

				let req = null;

				// 分类请求
				switch (item.value) {
					case 'shop':
						req = this.$service.bwbt.selfMall.page({ page, size });

						break;
					case 'jd':
						req = this.$service.bwbt.jdActivityGoods.page({ page, size, type: 3 });

						break;
					case 'wph':
						req = Promise.resolve({
							list:
								page == 1
									? [
											{
												title: '太平鸟 | *太平鸟高腰牛仔裤女小脚裤2020春季新款冰氧吧凉感紧身女士牛仔',
												price: '199.2',
												link:
													'https://m.vip.com/product-1710618725-6918717181090408709.html?wq=1&nmsns=shop_iphone-7.22.1-link&nst=product&nsbc=&nct=link&ncid=b61018ceb3baceee2eb9b1861bc3d31dbd760edb&nabtid=13&nuid=95193415&nchl_param=share:b61018ceb3baceee2eb9b1861bc3d31dbd760edb:1592376808941',
												pic:
													'https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/115128/2020/0325/132/ca0d1aa1-ef56-4c3c-8c23-e371b26e1185_720x909_70.jpg'
											},
											{
												title: '太平鸟 | 高腰黑色百褶裙女2020春季新款防走光学院风半身裙A字短裙',
												price: '179.91',
												link:
													'https://m.vip.com/product-1710618725-6918589586259183173.html?wq=1&nmsns=shop_iphone-7.22.1-link&nst=product&nsbc=&nct=link&ncid=b61018ceb3baceee2eb9b1861bc3d31dbd760edb&nabtid=13&nuid=95193415&nchl_param=share:b61018ceb3baceee2eb9b1861bc3d31dbd760edb:1592376899731',
												pic:
													'https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/115128/2019/1231/135/3c4c2d3f-4187-4d61-bd34-3520929e7850_720x909_70.jpg'
											},
											{
												title: '太平鸟 | 《婆婆妈妈》明星推荐 太平鸟刺绣t恤女韩版黑白色短袖宽松打底衫',
												price: '79.2',
												link:
													'https://t.vip.com/QwQ5m7W0yX9?&desturl=https%3A%2F%2Fm.vip.com%2Fproduct-1710618725-6918657767502946949.html%3Fnmsns%3Dshop_iphone-7.22.1-link%26nst%3Dproduct%26nsbc%3D%26nct%3Dlink%26ncid%3Db61018ceb3baceee2eb9b1861bc3d31dbd760edb%26nabtid%3D13%26nuid%3D95193415%26nchl_param%3Dshare%3Ab61018ceb3baceee2eb9b1861bc3d31dbd760edb%3A1592376966659&nmsns=shop_iphone-7.22.1-link&nst=product&nsbc=&nct=link&ncid=b61018ceb3baceee2eb9b1861bc3d31dbd760edb&nabtid=13&nuid=95193415&nchl_param=share:b61018ceb3baceee2eb9b1861bc3d31dbd760edb:1592376966659',
												pic:
													'https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/115128/2020/0217/192/99740974-d263-486a-bd8b-a4d6db6c8e2c_720x909_70.jpg'
											},
											{
												title: '太平鸟 | v领t恤女2020早春新款纯色韩版宽松打底衫短袖内搭ins潮',
												price: '64.08',
												link:
													'https://m.vip.com/product-1710618725-6918649035979724677.html?wq=1&nmsns=shop_iphone-7.22.1-link&nst=product&nsbc=&nct=link&ncid=b61018ceb3baceee2eb9b1861bc3d31dbd760edb&nabtid=13&nuid=95193415&nchl_param=share:b61018ceb3baceee2eb9b1861bc3d31dbd760edb:1592376980746',
												pic:
													'https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/115128/2020/0210/141/c97525ee-6a68-41bc-bc21-cf00e96b134d_720x909_70.jpg'
											},
											{
												title: '太平鸟 | 玻尿酸t恤女2020夏装新款大牌短袖多色韩版宽松打底衫',
												price: '75.24',
												link:
													'https://m.vip.com/product-1710618725-6918702538546553285.html?wq=1&nmsns=shop_iphone-7.22.1-link&nst=product&nsbc=&nct=link&ncid=b61018ceb3baceee2eb9b1861bc3d31dbd760edb&nabtid=13&nuid=95193415&nchl_param=share:b61018ceb3baceee2eb9b1861bc3d31dbd760edb:1592376994870',
												pic:
													'https://h2a.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/115128/2020/0318/129/78916484-02b7-4f4d-a637-e2d374d74f07_720x909_70.jpg'
											}
									  ]
									: [],
							pagination: {
								page: 1,
								total: 5,
								size: 20
							}
						});
						break;
					default:
						req = this.$service.bwbt.goods.dayAllowanceGoodsList({
							floorId: item.value,
							page,
							size,
							type: 3,
							...params,
							gids: getQueryString('gids')
						});
				}

				req.then(res => {
					// 追加还是重置
					if (!params.page || params.page == 1) {
						item.children = res.list;
					} else {
						item.children.push(...res.list);
					}

					item.finish = item.children.length == res.pagination.total;
					item.loading = false;
					this.skeletonLoading = false;

					resolve();

					if (item.children.length > 0) {
						this.$refs['task-popup'].open(item.value);
					}
				}).catch(err => {
					item.loading = false;
					this.skeletonLoading = false;
					console.error(err);
				});
			});
		},

		onReachBottom() {
			if (this.list.length > 0) {
				this.refresh({
					page: this.list[this.current].pagination.page + 1
				});
			}
		},

		async onPullDownRefresh() {
			this.loading = true;

			await this.refresh({
				page: 1
			});

			this.loading = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page-index {
	font-size: 24px;
	background-color: #f6f7fa;

	.header {
		position: relative;
		height: 500px;

		.subsidy-bg {
			height: 550px;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.countdown {
			display: flex;
			align-items: center;
			position: relative;
			top: 1px;

			/deep/.cl-countdown__number {
				background-color: transparent;
				margin: 0;
				padding: 0 5px;
				font-size: 24px;
				border-radius: 6px;
			}
		}

		.subsidy-price {
			height: 190px;
			width: calc(100% - 40px);
			position: absolute;
			bottom: 15px;
			left: 20px;
			z-index: 2;

			&-bg {
				height: 100%;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.detail {
				position: relative;
				padding-left: 150px;
				padding-top: 26px;
				color: #e62a0d;

				.value {
					font-size: 55px;
					font-weight: 500;

					&::after {
						content: '元';
						font-size: 28px;
						margin-left: 5px;
					}
				}
			}

			.scroller-winners {
				position: absolute;
				top: 50px;
				right: 25px;
			}

			.use-btn {
				height: 80px;
				width: 360px;
				position: absolute;
				left: calc(50% - 180px);
				bottom: -100px;
				border-radius: 80px;
				overflow: hidden;
				animation: z 2.4s infinite linear;
				z-index: 9;

				.m {
					display: block;
					height: 80px;
					width: 360px;
					position: absolute;
					top: 0;
					left: 0;
				}

				.g {
					height: 80px;
					width: 360px;
					display: block;
					margin-left: -100%;
					opacity: 0.7;
					animation: g 1.5s infinite ease-in-out;
				}

				@keyframes z {
					0% {
						transform: scale(1);
					}

					10% {
						transform: scale(0.9);
					}

					30% {
						transform: scale(1.1);
					}

					50% {
						transform: scale(1);
					}
				}

				@keyframes g {
					0% {
						margin-left: -100%;
					}

					100% {
						margin-left: 100%;
					}
				}
			}
		}
	}

	.container {
		position: relative;
		padding: 20px;
		margin-top: 20px;
		overflow: visible !important;

		.category-menu {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f6f7fa;
			height: 80px;
			width: 80px;
			padding-bottom: 10px;

			img {
				height: 40px;
				width: 40px;
			}
		}

		.banner {
			padding: 0 20px;
			margin-bottom: 20px;

			image {
				height: 225px;
				width: 100%;
			}
		}

		.goods-list {
			position: relative;
			padding-bottom: 150px;

			.goods-items {
				margin: 20px 0;
			}

			/deep/.van-tabs__nav {
				background-color: #f7f7f7;
			}
			.goods-limits {
				margin-bottom: 20px;
				.limit-box {
					background-color: #fff;
					border-radius: 22px;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					overflow: hidden;
					/deep/.goods-item {
						margin: 0;
						border-radius: 0;
					}
					.limit-head {
						padding: 28px 16px 22px 20px;
						font-size: 32px;
						display: flex;
						justify-content: space-between;
						color: #171717;
						background-position: center center;
						background-repeat: no-repeat;
						background-size: cover;
						.showMore {
							width: 130px;
							height: 40px;
							line-height: 40px;
							border: 2px solid #fe3216;
							border-radius: 24px;
							font-size: 24px;
							color: #fe3216;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.subsidy-price-sticky {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		height: 100px;
		width: 100%;
		z-index: 9999;
		background-color: #fff;
		padding: 0 20px;
		box-sizing: border-box;

		image {
			display: block;
			height: 89px;
			width: calc(100% - 40px);
			position: absolute;
			left: 20px;
		}

		.price {
			font-size: 30px;
			font-weight: 500;
			color: #fe3216;
			position: absolute;
			left: 230px;
		}

		.countdown {
			display: flex;
			align-items: center;
			position: absolute;
			right: 60px;
			color: #fe3216;
			font-weight: 500;

			/deep/.cl-countdown__number {
				background-color: transparent;
				margin: 0;
				font-size: 24px;
				padding: 0 5px;
				border-radius: 6px;
			}
		}
	}
}

.popup-snatched {
	background-color: #fff;
	/deep/.cl-popup {
		background-color: transparent;

		&__container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	&__cover {
		height: 668px;
		width: 668px;
	}

	&__tips {
		position: absolute;
		left: -5px;
		bottom: 250px;
		width: 100%;
		color: #fff;
		text-align: center;
		letter-spacing: 1px;

		& > span {
			&:first-child {
				font-size: 28px;
				margin-bottom: 10px;
			}
		}

		.countdown {
			display: flex;
			align-items: center;
			justify-content: center;

			/deep/.cl-countdown__number {
				background-color: transparent !important;
				font-size: 24px;
				padding: 0 5px;
				margin: 5px 0 !important;
			}
		}
	}

	&__btn {
		height: 70px;
		line-height: 70px;
		width: 200px;
		color: #fff;
		background-color: #f70114;
		box-shadow: 0 6px 10px 2px rgba(0, 0, 0, 0.4);
		font-size: 26px;
		border-radius: 70px;
		position: relative;
		top: -80px;
		margin: 0 auto;
		letter-spacing: 1px;
		border: 0;

		&::after {
			border: 0;
		}
	}
}
.popup-banner {
	/deep/.cl-popup {
		background-color: transparent;

		&__container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	width: 600px;
	height: 524px;
	position: relative;

	&__cover {
		width: 700px;
		// height: 524px;
	}
	.icon-close {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		right: 40px;
	}
	&__val {
		font-size: 28px;
		color: #ffffff;
		position: absolute;
		bottom: 210px;
		left: 0;
		right: 0px;
		margin: auto;
		text-align: center;
		z-index: 10;
	}
}

.popup-totb {
	/deep/.cl-popup {
		background-color: transparent;

		&__container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	&__cover {
		height: 700px;
		width: 600px;
	}

	&__tips {
		position: absolute;
		left: -5px;
		bottom: 265px;
		width: 100%;
		text-align: center;

		p {
			margin-bottom: 10px;
		}
	}

	&__btn {
		height: 70px;
		line-height: 70px;
		width: 200px;
		color: #fff;
		background-color: #f70114;
		box-shadow: 0 6px 10px 2px rgba(0, 0, 0, 0.4);
		font-size: 26px;
		border-radius: 70px;
		position: relative;
		top: -140px;
		letter-spacing: 1px;
		margin: 0 auto;
		border: 0;

		&::after {
			border: 0;
		}
	}

	&__close {
		position: absolute;
		right: calc(50% - 30px);
		bottom: 0;
		height: 60px;
		width: 60px;
	}
}

.pupop-copy-tkl {
	letter-spacing: 1px;

	/deep/.cl-popup {
		border-radius: 10px;

		&__container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 500px;
		}
	}

	img {
		height: 80px;
		width: 80px;
		margin: 50px 0 50px 0;
	}

	.fa {
		font-size: 28px;
	}

	.fb {
		font-size: 24px;
		color: #999;
		margin-top: 50px;
	}

	.countdown {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		margin-bottom: 20px;
	}

	.cl-icon-close {
		position: absolute;
		right: -5px;
		top: 5px;
		height: 60px;
		width: 60px;
		font-size: 40px;
	}
}

.top-tips {
	height: 40px;
	position: absolute;
	top: 15px;
	left: 10px;
	width: calc(100% - 20px);
	display: flex;
	transform: scale(0.8);

	&__cover {
		height: 60px;
		width: 100%;
		position: absolute;
	}

	&__item {
		flex: 1;
		text-align: center;
		color: #fff;
		font-size: 24px;
		position: relative;
		top: 14px;

		&.active {
			color: #fa5240;
		}
	}
}

/deep/.cl-countdown__number {
	background-color: #f70114 !important;
	color: #fff;
	height: 40px;
	line-height: 40px;
	padding: 0 5px;
	border-radius: 6px;
	margin: 10px 10px !important;
}

/deep/.cl-countdown__splitor {
	position: relative;
	top: -2px;
}

/deep/.van-tab {
	font-size: 26px;
}

/deep/.van-tabs {
	&__wrap {
		padding-right: 80px;
		height: 80px;
	}

	&__more {
		height: 76px;
		width: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 2px;
		z-index: 9;
		background-color: #f7f7f7;
	}

	&__menu {
		position: absolute;
		top: 80px;
		left: 0;
		z-index: 999;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		display: none;
		flex-wrap: wrap;
		padding: 10px;

		li {
			color: #fff;
			padding: 10px 20px;
		}
	}
}
</style>
